<template>
  <div class="manage">
    <HeaderBar title="管理" @back="goBack" />
    <TaskCard :task="task" />
    <div class="action-list">
      <van-button type="danger" class="action-btn" @click="onAction('delete')">删除</van-button>
      <van-button type="primary" class="action-btn" @click="onAction('edit')">编辑</van-button>
      <van-button type="warning" class="action-btn" @click="onAction('off')">下架</van-button>
      <van-button type="default" class="action-btn" @click="onShare">分享</van-button>
    </div>
    <van-action-sheet v-model:show="showShare" title="分享" :close-on-click-action="true" :actions="shareActions" @select="onShareAction" />
    <div class="task-footer">
      <img :src="task.avatar || `https://api.multiavatar.com/${task.author || 'user'}.svg`" class="avatar" />
      <span class="author">{{ task.author }}</span>
      <span class="time">{{ task.time }}</span>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useTaskStore } from '../store/index.js'
import HeaderBar from '../components/HeaderBar.vue'
import TaskCard from '../components/TaskCard.vue'
const router = useRouter()
const route = useRoute()
const store = useTaskStore()
const id = computed(() => route.params.id || route.query.id || route?.id)
const task = ref(store.tasks.find(t => t.id == id.value) || store.tasks[0])
const showShare = ref(false)
const shareActions = [
  { name: '微信', key: 'wechat' },
  { name: 'QQ', key: 'qq' },
  { name: '复制链接', key: 'copy' },
  { name: '举报', key: 'report' },
  { name: '已点赞', key: 'like' }
]
function goBack() { router.back() }
function onAction(name) {
  if (name === 'delete') {
    showDialog({ message: '确定要删除该任务吗？' }).then(() => {
      store.tasks = store.tasks.filter(t => t.id != task.value.id)
      showToast('删除成功')
      router.push('/')
    })
  } else if (name === 'edit') {
    router.push(`/publish?edit=${task.value.id}`)
  } else if (name === 'off') {
    showToast('已下架')
    // 可加下架逻辑
  } else if (name === 'wechat' || name === 'qq' || name === 'copy') {
    showToast('已分享')
  } else if (name === 'report') {
    showToast('已举报')
  } else if (name === 'like') {
    showToast('已点赞')
  }
}
function onShare() { showShare.value = true }
function onShareAction(action) {
  showShare.value = false
  showToast('已分享')
  setTimeout(() => { router.push('/') }, 500)
}
</script>
<style scoped>
.manage { 
  min-height: 100vh; 
  background: #fafbfa; 
  padding-bottom: 32px; 
  width: 100vw;
  box-sizing: border-box;
}
.action-list { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  margin: 20px 8px; 
}
.action-btn { 
  flex: 1 1 45%; 
  min-width: 120px; 
  height: 44px;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 500;
}
.task-footer { 
  display: flex; 
  align-items: center; 
  padding: 12px 16px; 
  background: #f8f9fa;
  border-radius: 8px;
  margin: 8px;
}
.avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  margin-right: 8px; 
}
.author { 
  font-weight: 600; 
  color: #222;
  margin-right: 8px; 
}
.time { 
  color: #999; 
  font-size: 13px; 
}
</style> 